<template>
  <div class="order-container">
    <!-- 我的订单部分 -->
    <div class="my-order-header">
      <h2>我的订单</h2>
    </div>
    <!-- 订单列表 -->
    <div class="order-list">
      <div class="order-item" v-for="order in orders" :key="order.id">
        <div class="order-header">
          <img :src="order.imageUrl" alt="商品图片">
          <div class="order-info">
            <div class="store-name">{{ order.storeName }}</div>
            <div class="order-status">{{ order.status }}</div>
          </div>
        </div>
        <div class="order-details">
          <div class="product-name">{{ order.productName }}</div>
          <div class="product-price">¥{{ order.price * order.count }}</div>
          <div class="product-count">
            数量：
            <el-button type="text" @click="decreaseCount(order)" :disabled="order.count <= 1">-</el-button>
            {{ order.count }}
            <el-button type="text" @click="increaseCount(order)">+</el-button>
          </div>
        </div>
        <div class="order-actions">
          <el-button type="text" @click="viewOrderDetails(order)">查看详情</el-button>
          <el-button type="text" @click="cancelOrder(order)">取消订单</el-button>
        </div>
      </div>
    </div>

    <!-- 底部导航栏 -->
    <div class="fixed-buttons">
      <el-row justify="space-around">
        <el-col :span="6">
          <el-button type="text" @click="goTo('/index')">
            <span>首页</span>
          </el-button>
        </el-col>
        <el-col :span="6">
          <el-button type="text" @click="goTo('/order')">
            <span>订单</span>
          </el-button>
        </el-col>
        <el-col :span="6">
          <el-button type="text" @click="goTo('/discover')">
            <span>发现</span>
          </el-button>
        </el-col>
        <el-col :span="6">
          <el-button type="text" @click="goTo('/my')">
            <span>我的</span>
          </el-button>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { ElButton } from 'element-plus';

const router = useRouter();
const goTo = (path) => {
  router.push(path);
};

// 模拟订单数据
const orders = ref([
  {
    id: 1,
    imageUrl: '@/img/img/sj01.png',
    storeName: '万家饺子(软件园E18店)',
    status: '待支付',
    productName: '各种饺子',
    price: 30,
    count: 2
  },
  // 可以添加更多订单数据
]);

const viewOrderDetails = (order) => {
  // 跳转到订单详情页面，可根据订单ID传递参数
  console.log(`查看订单详情，订单ID：${order.id}`);
  goTo(`/order-details/${order.id}`);
};

const cancelOrder = (order) => {
  // 模拟取消订单操作，实际应用中需与后端交互
  console.log(`取消订单，订单ID：${order.id}`);
  // 这里可以添加取消订单的逻辑，如发送请求到后端等
};

const decreaseCount = (order) => {
  if (order.count > 1) {
    order.count--;
  }
};

const increaseCount = (order) => {
  order.count++;
};
</script>

<style scoped>
.order-container {
  padding: 20px;

}

.my-order-header {
  text-align: center;
  margin-bottom: 20px;
  background-color: #007aff;
}

.order-list {
  margin-bottom: 20px;
}

.order-item {
  border: 1px solid #ccc;
  padding: 10px;
  margin-bottom: 10px;
}

.order-header {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.order-info {
  margin-left: 10px;
}

.store-name {
  font-size: 16px;
  font-weight: bold;
}

.order-status {
  color: #999;
}

.order-details {
  margin-bottom: 10px;
}

.product-name {
  font-size: 14px;
}

.product-price {
  font-size: 14px;
  color: #f00;
}

.product-count {
  font-size: 12px;
}

.order-actions {
  display: flex;
  justify-content: space-between;
}

.fixed-buttons {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #fff;
  padding: 10px 0;
  border-top: 1px solid #ccc;
}
</style>